import { FC } from "react";
import styles from './index.module.less'
import useStore from '@/store/index'

const ZustandTest: FC = () => {
    const brears = useStore((preState) => preState.bears)
    return (
        <div className={styles.container}>
            <div>
                <h1>zustand练习</h1>
                <h2>父组件:</h2>
                <p>bears值:{brears}</p>
            </div>
            <hr />
            <SonFun></SonFun>
        </div>
    )
}

const SonFun: FC = () => {
    const brears = useStore((preState) => preState.bears)
    const handleIncrement = useStore((preState) => preState.incrementBears);
    const handleRest = useStore((preState) => preState.restBears);
    const handleStep = useStore((preState) => preState.decrementBearsByStep);
    const handleAsync = useStore((preState)=>preState.asyncIncrementBears);
    return (
        <>
            <h2>子组件</h2>
            <p>bears值:{brears}</p>
            <div className={styles.flex_box}>
                <button onClick={handleIncrement}>bears值+1</button>
                <button onClick={handleRest}>重置bears数量</button>
                <button onClick={() => { handleStep(5) }}>bears减5</button>
                <button onClick={handleAsync}>1秒后bears加1,异步修改bears</button>
            </div>
        </>
    )
}



export default ZustandTest